<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    菜单管理
                    &#X3000;
                    <el-button type="primary" size="small" @click="showAppendDialog({},0)">增加一级菜单</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row class="menu">
            <el-tree
                    :data="menus"
                    node-key="id"
                    :props="props"
                    default-expand-all
                    :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div>{{ node.label }}</div>
                    <div>
                        <el-button v-if="node.level !==2" type="text" size="small" @click="showAppendDialog(data,node.level)">添加</el-button>
                        <el-button type="text" size="small" @click="showUpdateDialog(data,node)">修改</el-button>
                        <el-button type="text" size="small" @click="remove(data)">删除</el-button>
                    </div>
                </div>
            </el-tree>
        </el-row>
        <DialogInput ref="addMenuOneDialog" title="添加一级菜单">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="160px" size="small">
                    <el-form-item label="添加的一级菜单：">
                        <el-col :span="24">
                            <el-input v-model="form.name" type="text" placeholder="请输入一级菜单名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="添加的一级菜单URL：">
                        <el-col :span="24">
                            <el-input v-model="form.url" type="text" placeholder="请输入一级菜单URL"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddMenuOne()">添加</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="editMenuOneDialog" title="修改">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="160px" size="small">
                    <el-form-item label="一级菜单：">
                        <el-col :span="24">
                            <el-input v-model="form.name" type="text" placeholder="请输入一级菜单名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="一级菜单URL：">
                        <el-col :span="24">
                            <el-input v-model="form.url" type="text" placeholder="请输入一级菜单URL"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmEditMenuOne()">修改</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="addMenuTwoDialog" title="添加二级菜单">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="160px" size="small">
                    <el-form-item label="所处一级菜单：">
                        <el-col :span="24" style="text-align: left;">
                            {{form.oneMenuName}}
                        </el-col>
                    </el-form-item>
                    <el-form-item label="添加的二级菜单：">
                        <el-col :span="24">
                            <el-input v-model="form.name" type="text" placeholder="请输入二级菜单名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="添加的二级菜单URL：">
                        <el-col :span="24">
                            <el-input v-model="form.url" type="text" placeholder="请输入二级菜单URL"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddMenuOne()">添加</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="editMenuTwoDialog" title="修改">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="160px" size="small">
                    <el-form-item label="二级菜单：">
                        <el-col :span="24">
                            <el-input v-model="form.name" type="text" placeholder="请输入二级菜单名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="二级菜单URL：">
                        <el-col :span="24">
                            <el-input v-model="form.url" type="text" placeholder="请输入二级菜单URL"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmEditMenuTwo()">修改</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import DialogInput from '@component/common/DialogInput.vue';
    @Component({
        components:{
            DialogInput
        }
    })
    export default class MenuManage extends Vue {
        menus = []
        props = {
            children: 'menuDtos',
            label: 'name'
        }
        form = {
            name: '',
            url: '',
            oneMenuName: '',
            oneMenuId: 0,
            type: 0,
            id: ''
        }
        // 获取所有菜单列表（树形结构）
        async getTreeMenu () {
            let res = await this.$http.get('menu/menus')
            if (res.status == 200) {
                this.menus = res.data;
            }
        }

        showAppendDialog (data, leave) {
            this.form.oneMenuName = data.name;
            if (data.id == undefined) {
                this.form.oneMenuId = 0;
            }else {
                this.form.oneMenuId = data.id;
            }
            this.form.type = 1;
            this.form.name = '';
            this.form.url = '';
            if (leave == 0) {
                this.$refs['addMenuOneDialog'].openDialog();
            } else {
                this.$refs['addMenuTwoDialog'].openDialog();
            }
        }
        showUpdateDialog (item) {
            this.form.type = item.type;
            this.form.name = item.name;
            this.form.url = item.url;
            this.form.id = item.id;
            if (item.type == 0) {
                // 修改一级菜单
                this.$refs['editMenuOneDialog'].openDialog();
            } else {
                this.$refs['editMenuTwoDialog'].openDialog();
            }
        }
        remove (item) {
            if (item.type == 0) {
                this.$confirm('此操作将永久删除该一级菜单，同时也将删除该一级菜单下面的 二级菜单，是否继续?','提醒',{
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    customClass: 'custom-message-box',
                    center: true
                }).then(() => {
                    this.confirmDeleteMenu(item.id)
                }).catch((err) => {
                    console.log(err)
                })
            } else if (item.type == 1) {
                this.$confirm('此操作将永久删除该菜单，是否继续?','提醒',{
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    customClass: 'custom-message-box',
                    center: true
                }).then(() => {
                    this.confirmDeleteMenu(item.id)
                }).catch((err) => {
                    console.log(err)
                })
            }
        }
        confirmAddMenuOne () {
            this.confirmAddRes()
        }
        async confirmAddRes () {
            if (this.form.name == '' || !this.form.name) {
                this.$alert('请输入菜单名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.url == '' || !this.form.url) {
                this.$alert('请输入菜单URL！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let addPost = {
                parentId: this.form.oneMenuId,
                type: this.form.type,
                name: this.form.name,
                url: this.form.url
            }
            let res = await this.$http.post('menu/add',addPost)
            if (res.status == 200) {
                this.$refs['addMenuOneDialog'].closeDialog();
                this.$refs['addMenuTwoDialog'].closeDialog();
                this.getTreeMenu();
            }
        }
        confirmEditMenuTwo () {
            this.confirmEditRes();
        }
        async confirmEditRes () {
            if (this.form.name == '' || !this.form.name) {
                this.$alert('请输入菜单名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.url == '' || !this.form.url) {
                this.$alert('请输入菜单URL！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let editPost = {
                id: this.form.id,
                // parentId: this.form.oneMenuId,
                // type: this.form.type,
                name: this.form.name,
                url: this.form.url
            }
            let res = await this.$http.put('menu/update',editPost)
            if (res.status == 200) {
                this.$refs['editMenuOneDialog'].closeDialog();
                this.$refs['editMenuTwoDialog'].closeDialog();
                this.getTreeMenu();
            }
        }
        async confirmDeleteMenu (id: string|number) {
            let res = await this.$http.delete(`menu/${id}`)
            if (res.status == 200) {
                this.getTreeMenu();
            }
        }
        closeDialog () {
            this.$refs['addMenuOneDialog'].closeDialog();
            this.$refs['addMenuTwoDialog'].closeDialog();
            this.$refs['editMenuOneDialog'].closeDialog();
            this.$refs['editMenuTwoDialog'].closeDialog();
        }
        mounted () {
            this.getTreeMenu();
        }
    }
</script>

<style lang="scss" scoped>
    .menu {
        width: 400px;
        margin-top: 10px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }
</style>